<template>
  <el-dialog
    title="新增成员"
    :visible.sync="detailsvisible"
    :before-close="handleClose"
  >
    <el-form
      :inline="true"
      size="mini"
      :model="formInline"
      label-position="right"
    >
      <el-form-item label="姓名">
        <el-input
          class="filter-item"
          v-model="formInline.showName"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="所属部门">
        <el-cascader
          class="input-item"
          v-model="formInline.deptId"
          :clearable="true"
          placeholder="所属部门"
          :loading="loading"
          :props="dropdownprops"
          @visible-change="onDeptIdVisibleChange"
          :options="dropdownList"
          @change="onDeptIdValueChange"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="onSubmit">搜索</el-button>
        <el-button
          type="warning"
          class="el-button--reset"
          icon="el-icon-refresh-right"
          @click="resetFromdata"
          size="mini"
        ></el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="24">
        <el-table
          :data="tableData"
          size="mini"
          style="width: 100%"
          header-cell-class-name="table-header-gray"
          v-loading="isShowloading"
        >
          <el-table-column
            type="index"
            align="center"
            width="55"
            label="序号"
          ></el-table-column>
          <!-- <el-table-column
            prop=""
            align="center"
            label="头像"
            show-overflow-tooltip
          ></el-table-column> -->
          <el-table-column
            prop="showName"
            align="center"
            label="姓名"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="mobile"
            align="center"
            label="手机号"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="deptIdDictMapname"
            align="center"
            label="部门"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="postName"
            align="center"
            label="岗位"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="项目角色" prop="selectProjectRole">
            <template slot-scope="scope">
              <el-select
                :ref="`selectProjectRole${scope.$index}`"
                v-model="scope.row.leaderFlag"
                placeholder="请选择"
                @change="selectProjectRole($event, scope.row, scope.$index)"
              >
                <el-option
                  v-for="(item, i) in roleList"
                  :key="i"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="attendanceDays"
            align="center"
            label="项目角色"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.leaderFlag"
                @change="selectleaderFlag($event, scope.row, scope.$index)"
                :active-value="1"
                active-text="是"
                :inactive-value="0"
                inactive-text="否"
              >
              </el-switch>
            </template>
          </el-table-column> -->
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="120"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="selectTable(scope.row, scope.$index)"
                v-if="scope.row.check == false"
                >选择</el-button
              >
              <el-button
                type="text"
                @click="deleteTable(scope.row, scope.$index)"
                v-if="scope.row.check == true"
                >取消</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end" style="margin-top: 10px">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-size="page_size"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, prev, pager, next, sizes"
            :total="total"
          ></el-pagination>
        </el-row>
      </el-col>
    </el-row>
    <div class="login-btn flex-center">
      <el-button class="Register" @click="handleClose()">取消</el-button>
      <el-button type="primary" @click="submitForm()">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { SysDeptController, SysUserController } from '@/api';
export default {
  name: 'selectPeople',
  data () {
    return {
      time: '',
      detailsvisible: false,
      loading: false,
      isShowloading: false,
      dropdownList: [],
      dropdownprops: {
        label: 'deptName',
        value: 'deptId'
      },
      peopleList: [],
      tableData: [],
      userList: [],
      total: 0,
      page_size: 10,
      pageNo: 1,
      formInline: {
        showName: '',
        deptId: ''
      },
      // 角色列表
      roleList: [
        {
          value: 1,
          label: '协作人'
        },
        {
          value: 2,
          label: '关键因素推动人'
        },
        {
          value: 3,
          label: '外资企业'
        },
        {
          value: 4,
          label: '合资企业'
        },
        {
          value: 5,
          label: '私营企业'
        },
        {
          value: 6,
          label: '事业单位'
        },
        {
          value: 7,
          label: '国家行政机关'
        }
      ]
    };
  },
  mounted () {
  },
  methods: {
    // 选择项目角色
    selectProjectRole (e, data, index) {
      this.$nextTick(() => {
        let obj = this.roleList.find(item => item.value === e);
        if (obj) {
          this.$set(data, 'leaderName', obj.label)
          this.$set(this.tableData, index, { ...data });
        }
        if (data.check) {
          this.deleteTable(data, index)
          this.selectTable(data, index)
        }
      });
    },
    info (data) {
      this.detailsvisible = true
      this.userList = data
      console.log(data, 6666)
      this.loadDeptmentDropdownList()
      this.loadUserControllerList()
    },
    /**
     * 用户列表获取函数
     */
    loadUserControllerList () {
      return new Promise((resolve, reject) => {
        let params = {
          orderParam: [{ fieldName: 'createTime', asc: 1 }],
          pageParam: { pageNum: this.pageNo, pageSize: this.page_size },
          sysUserDtoFilter: this.formInline
        };
        SysUserController.list(this, params).then(res => {
          let listData = res.data.dataList
          this.tableData = listData
          this.tableData.forEach((item, index) => {
            if (item.deptIdDictMap) {
              item.deptIdDictMapname = item.deptIdDictMap.name
            } else {
              item.deptIdDictMapname = ''
            }
            // if (item.userTypeDictMap) {
            //   item.userTypeDictMapname = item.userTypeDictMap.name
            // } else {
            //   item.userTypeDictMapname = ''
            // }
            item.deptName = item.deptIdDictMapname
            // item.postName = item.userTypeDictMapname
            console.log(item.postName, 276)
            item.check = false
            let users = this.userList.find(items => {
              return item.userId === items.userId
            })
            if (users) {
              item.check = true;
              item.leaderFlag = users.leaderFlag;
              item.leaderName = users.leaderName;
              this.$set(this.tableData, index, item)
            }
          })
          this.total = res.data.totalCount
        }).catch(e => {
          reject(e);
        });
      });
    },
    /**
     * 所属部门下拉数据获取函数
     */
    loadDeptmentDropdownList () {
      return new Promise((resolve, reject) => {
        let params = {};
        SysDeptController.list(this, params).then(res => {
          this.dropdownList = res.data.dataList;
        }).catch(e => {
          reject(e);
        });
      });
    },
    /**
     * 所属部门下拉框显隐
     */
    onDeptIdVisibleChange (show) {

    },
    /**
     * 所属部门选中值改变
     */
    onDeptIdValueChange (value) {
      this.formInline.deptId = Array.isArray(value) ? value[value.length - 1] : undefined;
      this.loadDeptPost();
    },
    // 搜索
    onSubmit () {
      this.loadUserControllerList()
    },
    // 重置
    resetFromdata () {
      this.formInline = {
        showName: '',
        deptId: ''
      }
      this.pageNo = 1
      this.page_size = 10
      this.loadUserControllerList()
    },
    // 分页导航
    handleCurrentChange (val) {
      this.pageNo = val
      this.loadUserControllerList()
    },
    handleSizeChange (val) {
      this.page_size = val
      this.loadUserControllerList()
    },
    currentChange (val) {
      this.pageNo = val
      this.loadUserControllerList()
    },
    // 选择人员
    selectTable (row, index) {
      if (!row.leaderFlag) {
        this.$message({
          showClose: true,
          message: '请先选择项目角色',
          type: 'warning'
        });
        return false;
      }
      this.$set(row, 'check', true)
      this.$set(this.tableData, index, row)
      this.userList.push(row);
    },
    // 删除选择的人员
    deleteTable (row, index) {
      let tableData = this.tableData[index]
      tableData.check = false;
      this.$set(this.tableData, index, tableData)
      this.userList.forEach((item, indexs) => {
        if (item.userId === this.tableData[index].userId) {
          this.userList.splice(indexs, 1);
        }
      })
    },
    // 选择是否为负责人
    // selectleaderFlag (callback, row, index) {
    //   let text = ''
    //   if (callback === 1) {
    //     text = '确定设置为负责人？'
    //     row.leaderFlag = 0
    //   } else {
    //     text = '确定取消设置负责人？'
    //     row.leaderFlag = 1
    //   }

    //   let leaderFlag = []
    //   this.tableData.forEach(item => {
    //     if (item.leaderFlag === 1) {
    //       leaderFlag.push(item)
    //     }
    //   })
    //   if (leaderFlag.length === 1 && leaderFlag[0].userId === row.userId) {
    //     this.$message({
    //       showClose: true,
    //       message: '必须要有一名项目负责人！',
    //       type: 'warning'
    //     });
    //     row.leaderFlag = 1
    //     return false
    //   }

    //   this.$confirm(`${text}`, '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(async () => {
    //     this.tableData.forEach(item => {
    //       item.leaderFlag = 0
    //     })
    //     row.leaderFlag = 1
    //     this.$set(this.tableData, index, row)
    //     this.userList.forEach(item => {
    //       if (item.userId === row.userId) {
    //         item.leaderFlag = 1
    //       } else {
    //         item.leaderFlag = 0
    //       }
    //     })
    //   }).catch(e => {
    //     row.leaderFlag = 0;
    //     this.$set(this.tableData, index, row)
    //     this.userList.forEach(item => {
    //       if (item.userId === row.userId) {
    //         item.leaderFlag = 0
    //       }
    //     })
    //   });
    // },
    // 保存
    submitForm () {
      console.log(this.userList, 666555)
      this.$emit('getPeople', this.userList)
      this.formInline = {
        showName: '',
        deptId: ''
      }
      this.peopleList = []
      this.userList = []
      this.detailsvisible = false
    },
    // 关闭弹框
    handleClose () {
      this.peopleList = []
      this.userList = []
      this.$emit('getPeople', this.userList)
      this.formInline = {
        showName: '',
        deptId: ''
      }
      this.detailsvisible = false
    }
  }
}
</script>
<style scoped>
.login-btn {
  margin-top: 20px;
}
</style>
